<template>
  <div
    class="billPageHeadComponent"
    v-if="oItem"
    :style="{
      paddingTop: oItem.main.wrapperPT + 'px',
      paddingBottom: oItem.main.wrapperPB + 'px',
      paddingLeft: oItem.main.wrapperPLR + 'px',
      paddingRight: oItem.main.wrapperPLR + 'px',
    }"
  >
    <div
      class="content"
      :style="{
        paddingTop: oItem.main.modulePT + 'px',
        paddingBottom: oItem.main.modulePB + 'px',
        paddingLeft: oItem.main.modulePLR + 'px',
        paddingRight: oItem.main.modulePLR + 'px',

        backgroundColor: oItem.main.wrapperBgColor,
        backgroundImage: oItem.main.wrapperBgImg
          ? 'url(\'' + oItem.main.wrapperBgImg + '\')'
          : 'none',
        borderTopLeftRadius: oItem.main.wrapperBTR + 'px',
        borderTopRightRadius: oItem.main.wrapperBTR + 'px',
        borderBottomLeftRadius: oItem.main.wrapperBBR + 'px',
        borderBottomRightRadius: oItem.main.wrapperBBR + 'px',
      }"
    >
      <div
        class="style1"
        v-if="oItem.main.style === 1"
        :style="{
          backgroundColor: oItem.main.bgColor || 'transparent',
          backgroundImage: oItem.main.bgImg ? 'url(' + oItem.main.bgImg + ')' : 'none',
          borderTopLeftRadius: oItem.main.moduleBTR + 'px',
          borderTopRightRadius: oItem.main.moduleBTR + 'px',
          borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
          borderBottomRightRadius: oItem.main.moduleBBR + 'px',
        }"
      >
        <div class="head">
          <button
            :class="nav[0]"
            :style="{ 
              color: nav[0]=='on'? (oItem.main.contentFontColor || 'transparent') : (oItem.main.titleFontColor || 'transparent') 
            }"
          >
            <span>时间</span>
            <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
          </button>
          <button :class="nav[1]" :style="{ color: nav[1]=='on'? (oItem.main.contentFontColor || 'transparent') : (oItem.main.titleFontColor || 'transparent')  }">
            <span>项目</span>
            <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
          </button>
          <button :class="nav[2]" :style="{ color: nav[2]=='on'? (oItem.main.contentFontColor || 'transparent') : (oItem.main.titleFontColor || 'transparent')  }">
            <span>资金</span>
            <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
          </button>
        </div>

        <div class="body">
          <p class="tit" :style="{ color: oItem.main.titleFontColor || 'transparent' }">总收入(元)</p>
          <p class="num" :style="{ color: oItem.main.contentFontColor || 'transparent' }">888,533.54</p>
        </div>

        <div class="foot">
          <p>
            <span class="tit" :style="{ color: oItem.main.titleFontColor || 'transparent' }">佣金收入(元)</span>
            <span class="num" :style="{ color: oItem.main.contentFontColor || 'transparent' }">52.3</span>
          </p>
          <p>
            <span class="tit" :style="{ color: oItem.main.titleFontColor || 'transparent' }">分润收入(元)</span>
            <span class="num" :style="{ color: oItem.main.contentFontColor || 'transparent' }">52.3</span>
          </p>
          <p>
            <span class="tit" :style="{ color: oItem.main.titleFontColor || 'transparent' }">其他收入(元)</span>
            <span class="num" :style="{ color: oItem.main.contentFontColor || 'transparent' }">52.3</span>
          </p>
        </div>
      </div>

      <div
        class="style2"
        v-if="oItem.main.style === 2"
        :style="{
          backgroundColor: oItem.main.bgColor || 'transparent',
          backgroundImage: oItem.main.bgImg ? 'url(' + oItem.main.bgImg + ')' : 'none',
          borderTopLeftRadius: oItem.main.moduleBTR + 'px',
          borderTopRightRadius: oItem.main.moduleBTR + 'px',
          borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
          borderBottomRightRadius: oItem.main.moduleBBR + 'px',
        }"
      >
        <div class="head">
          <button
            :class="nav[0]"
            :style="{ 
              color: nav[0]=='on'? (oItem.main.contentFontColor || 'transparent') : (oItem.main.titleFontColor || 'transparent') 
            }"
          >
            <span>时间</span>
            <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
          </button>
          <button :style="{ color: nav[1]=='on'? (oItem.main.contentFontColor || 'transparent') : (oItem.main.titleFontColor || 'transparent')  }">
            <span>项目</span>
            <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
          </button>
          <button :style="{ color: nav[2]=='on'? (oItem.main.contentFontColor || 'transparent') : (oItem.main.titleFontColor || 'transparent')  }">
            <span>资金</span>
            <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
          </button>
        </div>

        <div class="body">
          <p class="tit" :style="{ color: oItem.main.titleFontColor || 'transparent' }">总收入(元)</p>
          <p class="num" :style="{ color: oItem.main.contentFontColor || 'transparent' }">888,533.54</p>
        </div>

        <div class="foot">
          <p>
            <span :style="{ color: oItem.main.titleFontColor || 'transparent' }">佣金收入(元)</span>
            <span :style="{ color: oItem.main.contentFontColor || 'transparent' }">52.3</span>
          </p>
          <p>
            <span :style="{ color: oItem.main.titleFontColor || 'transparent' }">分润收入(元)</span>
            <span :style="{ color: oItem.main.contentFontColor || 'transparent' }">52.3</span>
          </p>
          <p>
            <span :style="{ color: oItem.main.titleFontColor || 'transparent' }">其他收入(元)</span>
            <span :style="{ color: oItem.main.contentFontColor || 'transparent' }">52.3</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "billPageHeadComponent",
  data() {
    return {
      oItem: null,
      nav: ['on','','']
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.billPageHeadComponent {
  box-sizing: border-box;
  display: flex;
  .content {
    width: 100%;
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
  }
  .style1 {
    flex: 1;
    display: flex;
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    flex-direction: column;
    box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee, -3px -3px 3px #eee;
    .head {
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      button {
        background-color: transparent;
        border: none;
        font-size: 16px;
        color: #fff;
        font-weight: normal;
        &.on {
          opacity: 1;
        }
      }
    }
    .body {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 0;
      font-weight: normal;
      .tit {
        margin-bottom: 10px;
      }
      .num {
        font-size: 24px;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;
      padding: 15px 0 15px 0;
      p {
        font-size: 14px;
        align-items: center;
        display: flex;
        flex-direction: column;
        flex: 1;
        .tit {
          margin-bottom: 5px;
        }
      }
    }
  }
  .style2 {
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: scroll;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee, -3px -3px 3px #eee;
    .head {
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      button {
        background-color: transparent;
        border: none;
        font-size: 16px;
        color: #fff;
        font-weight: normal;
        &.on {
          opacity: 1;
        }
      }
    }
    .body {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 0;
      font-weight: normal;
      .tit {
        display: flex;
        justify-content: center;
        flex: 1;
        margin-bottom: 10px;
      }
      .num {
        display: flex;
        justify-content: center;
        flex: 1;
        font-size: 24px;
      }
    }
    .foot {
      display: flex;
      flex-direction: column;
      padding: 15px;
      p {
        line-height: 30px;
        font-size: 14px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        flex: 1;
        .tit {
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
